import React, { Component } from 'react'
import axios from 'axios'
import{baseUrl}from '../Tools/Ajax.js'
import StudentForm from '../components/StudentForm.js'
import Table from '../dulifile/Table.js'


const columns = [
    {
        title: '姓名',
        dataIndex: 'name'
    },{
        title: '年龄',
        dataIndex: 'age'
    },{
        title: '性别',
        dataIndex: 'xingbie'    
    },{
        title: '班级',
        dataIndex: 'banji'
    },{
        title: '爱好',
        dataIndex: 'aihao'
    }
] 


export default class Student extends Component {
    state = {
        showForm: false,
        StudentList: [],
        checkedStudents:[],
        isUpdate: false,
        currPage: 5,
        pageSize: 20,
        total: 0
    }

    componentDidMount(){
        this.getData()
    }
    getData=()=>{

        const { currPage, pageSize} = this.state
        const url = `http://localhost/qwq/api.php/xy_users?transform=1&order=id,desc&page=${currPage},${pageSize}`

        axios({
            method:'get',
            url: url
        }).then((res)=>{
            this.setState({ StudentList:res.data.xy_users, total: res.data._results})
        }).catch()
    }

    addFun=()=>{
        this.setState({ showForm: true, isUpdate: false})
    }

    deleBtn=()=>{
        this.setState({showForm:false})
    }

    saveHandle=(st)=>{
        console.log('....xxx',st)
        // return;
        st.aihao = st.aihao.join(',')
        let method = 'post', url = baseUrl + 'xy_users'
        if(this.state.isUpdate){
            method ='put',
            url += '/'+ st.id
        }
    
        axios({
            method: method,
            url: url,
            data:st
        }).then((res)=>{
            if(res.data > 0) {
                this.getData()
                this.deleBtn()
            }
        })
    }

    updateFun=()=>{
   
        if(this.state.checkedStudents.length === 0){
            alert('请至少选择一个用户进行修改！')
        }else {
            this.setState({ showForm: true, isUpdate: true })
        }
    }

    deleStudent=()=>{
    // console.log(this.state.checkedStudents)
    let arrIds = []
        this.state.checkedStudents.map((val,index)=>{
            arrIds.push(val.id)  
        })
        arrIds = arrIds.splice(',')
        // console.log(arry)

        if(this.state.checkedStudents.length == 0){
            alert('请至少选择一个或者多个删除！')
            return
        }else{
            if (! window.confirm('确定要删除该学生信息吗？')) {
                return
             }
        }

        axios({
            method:'delete',
            url: baseUrl + 'xy_users/' + arrIds
        }).then(res=>{
            // console.log(res)
            if (res) {
                this.getData()
            } else {
                alert('删除失败！')
            }
        })
        //   console.log(this.state.checkedStudents)
    }


    render() {
        const { pageSize, currPage ,total }= this.state

        const rowSelection = {
            onSelect:(seleted,selectedRows)=>{
                this.setState({checkedStudents: selectedRows})   
            }
        }

        const paging = {
            onChange: (page,size)=>{
                // console.log(page,size)
                this.setState({ currPage: page, pageSize: size},()=>{
                    this.getData()
                })
            },
            pageSize: pageSize,
            current: currPage,
            total: total
        }

        return (
        <div>
            <section className="content-header">
                <h1>学生档案</h1>
                <ol className="breadcrumb">
                    <li><a href="#"><i className="fa fa-dashboard"></i>首页</a></li>
                    <li className="active">学生管理</li>
                </ol>
                <div className="row">
                    <div className="btn-group col-md-9" style={{ marginTop: 20 }}>
                        <button onClick={this.addFun} type="button" className="btn btn-primary">增加</button>
                        <button onClick={this.updateFun}type="button" className="btn btn-warning">修改</button>
                        <button onClick={this.deleStudent} type="button" className="btn btn-danger">删除</button>
                    </div>
                    <div className="input-group input-group-sm col-md-3">
                        <input type="text" className="form-control" />
                        <span className="input-group-btn">
                            <button type="button" className="btn btn-info btn-flat">搜索</button>
                        </span>
                    </div>
                </div>
            </section>
         
            <Table 
            columns={columns} 
            dataSource={this.state.StudentList}
            showIndex={true}
            rowSelection={rowSelection}
            pagination={paging}

            />
                {/* <div style={{ height: this.state.tableHeight , overflow:'auto'}} >
                    <table className="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th style={{ width: 30 }}>
                                  <input type="checkbox"/>
                                </th>
                                <th>#</th>
                                <th>姓名</th>
                                <th>年龄</th>
                                <th>性别</th>
                                <th>班级</th>
                                <th>爱好</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.StudentList.map(function (st, index) {
                                return (
                                    <tr key={index}>
                                        <td style={{width:30}}>
                                            <input type="checkbox"/>
                                        </td>
                                        <td>{index+1}</td>
                                        <td>{st.name}</td>
                                        <td>{st.age}</td>
                                        <td>{st.xingbie}</td>
                                        <td>{st.banji}</td>
                                        <td>{st.aihao}</td>
                                    </tr>
                                )
                            })}
                        </tbody>
                    </table>
                </div> */}
                {/* <ul className="pagination pagination-sm no-margin pull-right">
                    <li><a href="#">«</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">»</a></li>
                </ul> */}
        {
            this.state.showForm ? 
            <StudentForm 
                deleBtn={this.deleBtn}
                student={this.state.checkedStudents[0]}
                isUpdate={this.state.isUpdate}
                saveHandle={this.saveHandle}
            /> 
            : ''  
        }
        </div>
        )
    }
    }
